<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">航标健康总览</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem;display: flex;">
      <div style="width: 40%;height: 100%;" ref="ech"></div>
      <div style="width: 60%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
        <div v-for="(item,key) in dataList" :key="key" style="width: 100%;height: calc(100% / 3 - 0.5rem);background-color: rgba(32, 119, 249, 0.15);padding: 0 1rem;display: flex;align-items: center;justify-content: space-between;">
          <div style="display: flex;align-items: center;">
            <div style="width: 2rem;height: 0.5rem;margin-right: 1rem;" :style="{background:item.color}"></div>
            <div>{{ item.name }}</div>
          </div>
          <div :style="{color:item.color}" style="font-size: 1.2rem;font-weight: bold;">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  //变量
  data() {
    return {
      Echarts: null,
      dataList: [
        { value: 1048, name: '正常',color: '#23E9FF' },
        { value: 735, name: '告警中',color: '#FF7878' },
        { value: 580, name: '待处置',color: '#FFF385' },
      ],
    }
  },
  //初始
  mounted() {
    let echartsL = echarts;
    this.$nextTick(() => {
      let echarts = echartsL.init(this.$refs.ech, "macarons");
      this.Echarts = echarts;
      this.getEach()
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getEach() {
      var option = {
        tooltip: {
          // show: false,
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataList
          }
        ]
      };

      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped></style>